<template>
  <div class="app-detail-container">
    <a-form-model
      ref="ruleForm"
      :model="ruleForm"
      :label-col="{ span: 2 }"
      :wrapper-col="{ span: 20 }"
    >
      <div class="app-detail-h2-title">
        商品详情
      </div>
      <a-form-model-item label="商品名称" prop="name">
        商品名称
      </a-form-model-item>
      <a-form-model-item label="条形码" prop="bar_code">
        条形码
      </a-form-model-item>
      <a-form-model-item label="商品销售渠道" prop="sales_target">
        网店
      </a-form-model-item>
      <a-form-model-item label="主图" prop="cover_Image">
        <GallerySelector v-model="ruleForm.cover_Image"></GallerySelector>
      </a-form-model-item>
      <a-form-model-item label="轮播图" prop="carousel_images">
        <GallerySelectorMultiple
          v-model="ruleForm.carousel_images"
        ></GallerySelectorMultiple>
      </a-form-model-item>
      <a-form-model-item label="单位" prop="unit_three">
        单位
      </a-form-model-item>
      <a-form-model-item label="商品详情" prop="details">
        <Base-Editor v-model="ruleForm.details"></Base-Editor>
      </a-form-model-item>
      <div class="submit flex-start-center" style="padding-left:8.1%">
        <a-button type="default" @click="routerPush('/goods/manage/list')">
          返回列表
        </a-button>
        <a-button
          :loading="confirmLoading"
          type="primary"
          class="margin-left-20"
          @click="validateSubmit(2)"
        >
          保存
        </a-button>
        <a-button
          :loading="confirmLoading"
          type="primary"
          class="margin-left-20"
          @click="validateSubmit(1)"
        >
          上架
        </a-button>
      </div>
    </a-form-model>
  </div>
</template>
<script>
export default {
  name: 'FormDetail',
  props: {
    // 是否显示
    visible: {
      type: Boolean,
      default: false
    },
    // 是否是编辑
    isEdit: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      confirmLoading: false,
      // 表单
      ruleForm: {}
    }
  },
  created() {},
  mounted() {},
  methods: {}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.app-rule-form-container {
  background-color: #fff;
  padding: 30px 10px;
}
</style>
